<!-- 运费管理 -->
<template>
  <div class="dashboard-container waybill-list customer-list-box freightManagement">
    <el-card
      shadow="never"
      class="box-card"
    >
      <el-button
        type="warning"
        class="newBtn"
        @click="handleDispatch"
      >新增模板</el-button>
      <el-table
        ref="freightManageTable"
        :data="tableData"
        fit
        style="width: 100%"
        :header-cell-style="{ background: 'rgba(250,252,255,1)' }"
      >
        <el-table-column
          align="center"
          prop="templateType"
          label="模板类型"
          width="190"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="transportType"
          label="运送类型"
          width="162"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="associatedCityList"
          label="关联城市"
          width="281"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="firstWeight"
          label="首重"
          width="110"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="continuousWeight"
          label="续重"
          width="110"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="lightThrowingCoefficient"
          label="轻抛系数"
          width="144"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="id"
          label="操作"
          width="128"
        >
          <template slot-scope="scope">
            <el-link
              type="primary"
              @click="change(scope.row)"
            >编辑</el-link>
            <el-divider direction="vertical" />
            <el-link
              type="danger"
              @click="del(scope.row.id)"
            >删除</el-link>
          </template>

        </el-table-column>
      </el-table>
    </el-card>
    <el-dialog
      title="新增模板"
      :visible.sync="dialogVisible"
      width="600px"
      :before-close="handleClose"
      class="add-form-dialog"
    >
      <el-form
        ref="typeform"
        :model="typeform"
        :rules="rules"
      >
        <el-form-item
          label="模板类型"
          prop="templateType"
        >
          <el-select
            v-model="typeform.templateType"
            placeholder="请选择模板类型"
            style="width: 400px; height: 40px;"
          >
            <el-option
              v-for=" (item) in templateTypeList"
              :key="item"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="运送类型"
          prop="transportType"
        >
          <el-select
            v-model="typeform.transportType"
            placeholder="请选择运送类型"
            style="width: 400px; height: 40px;"
          >
            <el-option
              v-for=" (item) in transportTypeList"
              :key="item"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="关联地区"
          prop="associatedCityList"
        >
          <el-checkbox-group v-model="typeform.associatedCityList">
            <el-checkbox
              v-for=" (item) in associatedCityList"
              :key="item"
              :label="item"
              name="type"
            ></el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item
          label="首重价格"
          prop="firstWeight"
        >
          <el-input
            v-model.number="typeform.firstWeight"
            placeholder="请输入首重价格"
            style="width: 400px; height: 40px;"
          >
            <span
              slot="suffix"
              style="
                    color: #20232a;
                    font-weight: 400;
                    font-size: 14px;
                    font-family: PingFangSC, PingFangSC-Regular;
                    margin-right: 14px;
                  "
            >元
            </span>
          </el-input>
        </el-form-item>
        <el-form-item
          label="续重价格"
          prop="continuousWeight"
        >
          <el-input
            v-model.number="typeform.continuousWeight"
            placeholder="请输入续重价格"
            style="width: 400px; height: 40px;"
          >
            <span
              slot="suffix"
              style="
                    color: #20232a;
                    font-weight: 400;
                    font-size: 14px;
                    font-family: PingFangSC, PingFangSC-Regular;
                    margin-right: 14px;
                  "
            >元
            </span>
          </el-input>
        </el-form-item>
        <el-form-item
          label="轻抛系数"
          prop="lightThrowingCoefficient"
        >
          <el-input
            v-model.number="typeform.lightThrowingCoefficient"
            placeholder="请输入轻抛系数"
            style="width: 400px; height: 40px;"
          >
          </el-input>
        </el-form-item>
        <el-form-item style="text-align: center;">

          <el-button
            style="height: 40px; width: 90px;"
            @click="resetForm()"
          >取消</el-button>
          <el-button
            type="danger"
            style="height: 40px;width: 90px;"
            @click="submitForm('typeform')"
          >确认</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { freightManageTypeListAPI, newfreightManageTypeAPI, delfreightManageTypeAPI } from '@/api/freightManage'
export default {
  data() {
    return {
      tableData: [],
      dialogVisible: false,
      typeform: {
        associatedCityList: [], // 关联城市
        // computeWeight: '', // 计费重量
        continuousWeight: '', // 续重价格
        // created: '', // 创建时间
        // expense: '', // 运费
        firstWeight: '', // 首重价格
        // id: '', // 运费模板id
        lightThrowingCoefficient: '', // 轻抛系数
        templateType: '', // 模板类型
        transportType: '' // 运送类型
        // updated: ''// 更新时间
      },
      rules: {
        templateType: [
          { required: true, message: '请选择模板类型', trigger: 'change blur' }
        ],
        transportType: [
          { required: true, message: '请选择运送类型', trigger: 'change blur' }
        ],
        associatedCityList: [
          { required: true, message: '请选择关联地区', trigger: 'change blur' }
        ],
        firstWeight: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (value) {
                if (Number(value)) {
                  if (+value <= 0) {
                    callback(
                      new Error('请输入正数')
                    )
                  } else {
                    callback()
                  }
                } else {
                  callback(
                    new Error('请输入正数')
                  )
                }
              } else {
                callback(new Error('请输入首重价格'))
              }
            },
            trigger: 'blur'
          }
        ],
        continuousWeight: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (value) {
                if (Number(value)) {
                  if (+value <= 0) {
                    callback(
                      new Error('请输入正数')
                    )
                  } else {
                    callback()
                  }
                } else {
                  callback(
                    new Error('请输入正数')
                  )
                }
              } else {
                callback(new Error('请输入续重价格'))
              }
            },
            trigger: 'blur'
          }
        ],
        lightThrowingCoefficient: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (value) {
                if (Number(value)) {
                  if (+value <= 0) {
                    callback(
                      new Error('请输入正数')
                    )
                  } else {
                    callback()
                  }
                } else {
                  callback(
                    new Error('请输入正数')
                  )
                }
              } else {
                callback(new Error('请输入轻抛系数'))
              }
            },
            trigger: 'blur'
          }
        ],

        dispatchTime: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (value) {
                const reg = /^(?:[1-9]|([1-3][0-9])?|4[0-8])$/
                if (!reg.test(Number(value))) {
                  callback(
                    new Error('请输入1-48正整数')
                  )
                } else {
                  callback()
                }
              } else {
                callback(new Error('最晚任务下发时间不能为空'))
              }
            },
            trigger: 'blur'
          }
        ]
      },
      templateTypeList: [
        '同城寄',
        '省内寄',
        '经济区互寄',
        '跨省'
      ],
      transportTypeList: [
        '普快',
        '特快'
      ],
      associatedCityList: [
        '全国',
        '京津冀',
        '江浙沪',
        '川渝',
        '黑吉辽'
      ]

    }
  },
  async created() {
    await this.getFreightManageTypeList()
  },
  methods: {
    // 编辑模板逻辑
    change(row) {
      this.typeform = row
      this.typeform.associatedCityList = this.typeform.associatedCityList.split(',')
      // this.typeform.id = +this.typeform.id
      console.log('改变后', this.typeform)
      this.handleDispatch()
    },
    // 删除模板逻辑
    del(id) {
      this.$confirm('确定要删除模板吗?', '删除确认', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async() => {
          await delfreightManageTypeAPI(id).then(async (res) => {
            // 异常不处理，信息不外抛。。。。
            if (String(res.code) === '200') {
              this.$message.success('删除成功')
              await this.getFreightManageTypeList()
              this.dialogVisible = false
            } else {
              this.$message.error(res.msg || '删除失败')
            }
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
    },
    // 提交新增/修改运费模板数据
    async newfreightManageType() {
      this.typeform = this.changeSendData(this.typeform)
      const res = await newfreightManageTypeAPI(this.typeform)
      console.log('提交结果', res)
    },
    // 提交表单
    submitForm(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          alert('submit!')
          await this.newfreightManageType()
          this.resetForm()
          await this.getFreightManageTypeList()
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // 取消
    resetForm() {
      this.typeform = {
        associatedCityList: [], // 关联城市
        computeWeight: '', // 计费重量
        continuousWeight: '', // 续重价格
        created: '', // 创建时间
        expense: '', // 运费
        firstWeight: '', // 首重价格
        id: '', // 运费模板id
        lightThrowingCoefficient: '', // 轻抛系数
        templateType: '', // 模板类型
        transportType: '', // 运送类型
        updated: ''// 更新时间
      }
      this.handleClose()
    },
    // 打开弹窗
    handleDispatch() {
      this.dialogVisible = true
    },
    // 关闭弹窗
    handleClose() {
      this.dialogVisible = false
    },
    // 获取运费模板列表
    async getFreightManageTypeList() {
      const res = await freightManageTypeListAPI()
      console.log(res)
      this.tableData = res.data
      this.tableData = this.tableData.map(item => {
        return this.changeShowData(item)
      })
    },
    // 显示数据处理
    changeShowData(table) {
      // templateType 1-同城寄，2-省内寄，3-经济区互寄，4-跨省
      const templateTypemap = {
        1: '同城寄',
        2: '省内寄',
        3: '经济区互寄',
        4: '跨省'
      }
      // transportType 1-普快，2-特快
      const transportTypeMap = {
        1: '普快',
        2: '特快'
      }
      // associatedCityList 关联城市：1-全国，2-京津冀，3-江浙沪，4-川渝，5-黑吉辽
      const associatedCityListMap = {
        '1': '全国',
        '2': '京津冀',
        '3': '江浙沪',
        '4': '川渝',
        '5': '黑吉辽'
      }
      table.transportType = transportTypeMap[table.transportType]
      table.templateType = templateTypemap[table.templateType]
      table.associatedCityList = table.associatedCityList.map(item => {
        if (associatedCityListMap[item]) {
          return associatedCityListMap[item]
        }
        return item
      }).join(',')
      return table
    },
    // 发送数据处理
    changeSendData(table) {
      // templateType 1-同城寄，2-省内寄，3-经济区互寄，4-跨省
      const templateTypemap = {
        '同城寄': 1,
        '省内寄': 2,
        '经济区互寄': 3,
        '跨省': 4
      }
      // transportType 1-普快，2-特快
      const transportTypeMap = {
        '普快': 1,
        '特快': 2
      }
      // associatedCityList 关联城市：1-全国，2-京津冀，3-江浙沪，4-川渝，5-黑吉辽
      const associatedCityListMap = {
        '全国': '1',
        '京津冀': '2',
        '江浙沪': '3',
        '川渝': '4',
        '黑吉辽': '5'
      }
      table.transportType = transportTypeMap[table.transportType]
      table.templateType = templateTypemap[table.templateType]
      table.associatedCityList = table.associatedCityList.map(item => {
        return associatedCityListMap[item]
      })
      return table
    }
  }
}
</script>

<style lang="scss" scoped rel="stylesheet/scss">
.waybill-list {
  .el-dialog__wrapper {
    ::v-deep .el-dialog__body {
      padding:40px 60px;
      font-size: 14px;
    }
  }
}
.freightManagement{
  .box-card{
    margin: 0 20px;
    width: 1190px;
    ::v-deep .el-card__body{
      padding: 30px;
      .newBtn{
        margin-bottom: 35px;
      }
      .el-table{
        tr .cell {
            text-align: center;
        }
        tr th:first-child .cell,
        tr td:first-child .cell {
            padding-left: 0;
        }

        .el-table-column{
          .el-button{
            display: inline-block;
          }
        }
      }

    }

  }
}
</style>
